<template>
	<view class="">
		<view class="flex_x" @click="termsService">
			<view class="flex_x img34">
				<u-icon v-if="is_agreement" name="checkmark-circle-fill" :color="b_color" size="34rpx" top='1'></u-icon>
				<view v-else class="zhRadio br50" :style="[zh_radio_br]"></view>
			</view>
			<view class="ml12 fs24 flex_x" :style="{'color':color}">
				我已阅读并同意
				<text @click.stop="agreement('user_protocol','在线选车位须知')"><text class="fw500"
						:style="{'color':xy_color}">《在线选车位须知》</text></text>
			</view>
		</view>
	</view>

	<!-- 使用
	 		<agreement :is_agreement.sync='is_agreement'></agreement>
	 -->
</template>

<script>
	export default {
		props: {
			is_agreement: { //协议是否勾选
				typeof: Boolean,
				default: false,
			},
			color: { //文字颜色
				default: '#333',
			},
			b_color: { //勾选颜色
				default: '#d74343',
			},
			br_c: { //勾选边框颜色
				default: '#333',
			},
			xy_color: { //协议文字颜色
				default: '#666',
			}
		},
		components: {},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			termsService() { //点击协议
				this.$emit('update:is_agreement', !this.is_agreement)
			},
			agreement(type, title) { //用户协议 隐私协议
				uni.navigateTo({
					url: `/pages/richText/richText?type=${type}&title=${title}`,
					success: () => {
						this.$emit('update:is_agreement', true)
					}
				})
			},
		},
		computed: {
			zh_radio_br() {
				return {
					border: `2rpx solid ${this.br_c}`
				}
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.zhRadio {
		width: 26upx;
		height: 26upx;
	}
</style>